<template>
  <view class="container">
    <hello-title></hello-title>
    <view style="height: 24px"></view>
    <view class="page-title page-title--no-padding">心率</view>
    <view class="page-title page-title--no-padding page-title--sub">数据来源：华为手环ABC</view>
    <view class="step-main-card">
      <view class="circle-card">
        <view class="content">
          <image :src="heartImage"></image>
        </view>
      </view>
      <view class="detail">
        <view class="detail__row">
          <text class="detail__row--hint">心率</text>
          <text class="detail__row--big">{{rate}} <text>BPM</text></text>
        </view>
      </view>
    </view>
    <view class="data-card-area">
      <view class="data-card data-card--red">
        <view class="data-card__head">
          <text>最大心率</text>
          <view class="data-card__icon data-card__icon--heart"></view>
        </view>
        <view class="data-card__content">
          <text>{{highRate}}</text>
          <text class="unit">BPM</text>
        </view>
      </view>
      <view style="width:30px"></view>
      <view class="data-card data-card--red">
        <view class="data-card__head">
          <text>最小心率</text>
          <view class="data-card__icon data-card__icon--heart"></view>
        </view>
        <view class="data-card__content">
          <text>{{lowRate}}</text>
          <text class="unit">BPM</text>
        </view>
      </view>
    </view>
    <view class="data-card data-card--red">
      <view class="data-card__head">
        <text>静息心率</text>
        <view class="data-card__icon data-card__icon--heart"></view>
      </view>
      <view class="data-card__content">
        <text>{{restRate}}</text>
        <text class="unit">BPM</text>
      </view>
    </view>
    <view class="line-card">
      <view class="line-card__tabs">
        <view class="line-card__tab" @tap="showWeekChart"
              :class="{'line-card__tab--active-red':chartDateType===1}">
          每周
        </view>
        <view class="line-card__tab" @tap="showMonthChart"
              :class="{'line-card__tab--active-red':chartDateType===2}">
          每月
        </view>
      </view>
      <view class="line-card__content" :class="{'line-card__content--hidden':chartDateType!==1}">
        <line-chart id="heart-fast-week" v-if="weekChartData" :config="weekChartData" line-color="#ED7D76"></line-chart>
      </view>
      <view class="line-card__content" :class="{'line-card__content--hidden':chartDateType!==2}">
        <line-chart id="heart-fast-month" v-if="monthChartData" :config="monthChartData" line-color="#ED7D76"></line-chart>
      </view>
    </view>
  </view>
</template>

<script>
import "./index.less";
import helloTitle from "../../../common-components/hello-title/hello-title";
import LineChart from "../../../common-components/line-chart/line-chart";
import heartImage from "../../../assets/images/data-heart.svg"
import {getHistoryData} from "../../../services/healthy-data-service";
import findIndex from 'lodash.findindex';
import get from 'lodash.get';
interface DetailDataResult<T> {
  dayOfMonth: Number,
  dayOfWeek: Number,
  value:T,
}

interface HeartRateResult {
  fastHeartRate: number,
  heartRate: number,
  restingHeartRate:number,
  slowHeartRate: number,
}
export default {
  name: "index",
  components:{
    LineChart,
    helloTitle,
  },
  data(){
    return {
      heartImage,
      chartDateType:1,
      weekChartData:null,
      monthChartData:null,
      highRate:0,
      restRate:0,
      lowRate:0,
      rate:0,
    }
  },
  methods:{
    showWeekChart() {
      this.chartDateType = 1;
    },
    showMonthChart() {
      this.chartDateType = 2;
    },
    // 把数据格式化成 ${daysNumber} 天的数据
    formatChartData(data, daysNumber: number) {
      const baseConfig = {
        yAxis: {
          unit: 1,
          base: 50,
          top: 140,
          display: [
            // 必须按顺序
            {value: 50, label: "50"},
            {value: 90, label: "90"},
            {value: 120, label: "120"},
            {value: 140, label: "140"},
          ],
        },
        dataset: [],
      }
      for (let i = 1; i <= daysNumber; i++) {
        const index = findIndex(data, (item) => item.dayOfWeek === i);
        baseConfig.dataset.push({value: get(data[index], "value.fastHeartRate", 0)});
      }
      return baseConfig;
    }
  },
  async created() {
    const weekResult = await getHistoryData("DAY_OF_WEEK", "BLOOD_SUGAR");
    const monthResult = await getHistoryData("DAY_OF_WEEK", "BLOOD_SUGAR");
    console.log(weekResult)
    this.highRate = get(weekResult[weekResult.length-1],`value.fastHeartRate`,0);
    this.lowRate = get(weekResult[weekResult.length-1],`value.slowHeartRate`,0);
    this.rate = get(weekResult[weekResult.length-1],`value.restingHeartRate`,0);
    this.restRate = get(weekResult[weekResult.length-1],`value.fastHeartRate`,0);
    this.weekChartData = this.formatChartData(weekResult,7);
    this.monthChartData = this.formatChartData(monthResult,30);
    console.log(this.weekChartData);
  }
}
</script>
